<template>
    <div class="all">
        <!-- 顶部导航栏 -->
        <ListDetailsHandle :isShow='isShow'>
            <div slot="topNav-content">
                <div class="paging-component">
                    <router-link 
                        v-for="(item,index) in routerArr"
                        :key='index'
                        :to='item.path' 
                        tag='div' 
                        class="page-content" 
                        :class="{active : currentIndex == index}"  
                        @click.native='changestyle(index)'
                    >
                    <p>{{item.name}}</p>
                    </router-link>
                </div>
            </div>
        </ListDetailsHandle>

        <router-view ></router-view>

        <div class="bottomAddShoppingCar">
            加入购物车
        </div>
    </div>
</template>

<script>
import ListDetailsHandle from './detailsComponents/ListDetailsHandle.vue'

export default {
    name:'GoodsDetailsLayout',
    data(){
        return{
            currentIndex:0,
            routerArr:[{
                path:'/goodsDetailsLayout/color',
                name:'颜色'
            },{
                path:'/goodsDetailsLayout/colorNo',
                name:'色号'
            }],
            isShow:false
        }
    },
    methods:{
        changestyle(index){
            this.currentIndex=index;
        }
    },
    components:{
        ListDetailsHandle
    }
}
</script>


<style lang='less' scoped>

.paging-component{
    width: 155px;
    height: 32px;
    display: flex;
    .page-content{
        flex: 1;
        border: 1px solid #E5E5E5;
        p{
            font-size: 16px;
            color: rgba(16,16,16,1);
        }
    }
}


.active{
    background-color: #EDEDED;
}


.bottomAddShoppingCar{
    width: 100%;
    height: 49px;
    line-height: 49px;
    text-align: center;
    font-size: 16px;
    color: rgba(16,16,16,1);
    background-color: #D9D9D9;
    position: fixed;
    bottom: 0;
}
</style>
